<template>
  <div class="textarea1">
    <!-- <el-input type="textarea" disabled v-model="targetContent" style="font-size: 20px;color: #000"></el-input> -->
    <div class="target_box">{{ targetContent }}</div>
    <div class="text_block">将上方文字内容输入到下方输入框中，请注意大小写，标点符号！</div>
    <el-input type="textarea" :disabled="disable" v-model="myInput" :rows="2" @change="changeInput" style="font-size: 20px;"></el-input>
  </div>
</template>
<script>
export default {
  props: {
    targetContent: {
      type: String,
      default: ""
    },
    disable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      myInput: ""
    }
  },
  methods: {
    changeInput(val) {
      if(!this.disable) {
        this.$emit("changeInput", val, this.idx)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.textarea1 {
  text-align: left;
  .text_block {
    margin: 5px 0;
  }
}
.el-textarea .el-textarea__inner {
  font-size: 20px !important;
}
.target_box {
  padding: 5px 15px;
  font-size: 20px;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  color: #000;
}
</style>